<template>
  <!-- 试题录入组件============================================================ -->
  <div>
    <el-card class="box-card box-dewqa">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <div class="text item">
        <el-row>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item>
              <el-col :span="2" class="lef">学科</el-col>
              <el-col :span="22">
                <div class="block">
                  <el-cascader
                    v-model="value1"
                    :options="subjectOptions"
                    :props="cateProps"
                    @change="subjectChange"
                  ></el-cascader>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="2" class="lef">目录</el-col>
              <el-col :span="22">
                <div class="block">
                  <el-cascader
                    ref="cascaderAddr"
                    v-model="value2"
                    :options="value2Options"
                    :props="twpcateProps"
                    @change="catalogue"
                  ></el-cascader>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="2" class="lef">企业</el-col>
              <el-col :span="22">
                <div class="block">
                  <el-cascader
                    v-model="value3"
                    :options="threejectOptions"
                    :props="threecateProps"
                    @change="enterpriselogue"
                  ></el-cascader>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="2" class="lef">城市</el-col>
              <el-col :span="22">
                <div class="block">
                  <!-- 城市 -->
                  <el-select
                    v-model="value4"
                    placeholder="请选择"
                    @change="citeyChenge($event)"
                  >
                    <el-option
                      v-for="(item, index) in citeySheng"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                  <!-- 地区 -->
                  <el-select
                    v-model="value5"
                    placeholder="请选择"
                    style="margin-left: 15px"
                    @change="diquChenge($event)"
                  >
                    <el-option
                      v-for="(item, index) in region"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="2" class="lef">方向</el-col>
              <el-col :span="22">
                <div class="block">
                  <el-cascader
                    v-model="value6"
                    :options="directionList"
                    :props="directionOpns"
                    @change="directionChange"
                  ></el-cascader>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="2" class="lef diTop">题型</el-col>
              <el-col :span="22">
                <div class="block">
                  <el-radio-group
                    v-model="radio1"
                    class="radioTop"
                    @change="questionRadio"
                  >
                    <el-radio label="1">单选</el-radio>
                    <el-radio label="2">多选</el-radio>
                    <el-radio label="3">简答</el-radio>
                  </el-radio-group>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="2" class="lef diTop">难度</el-col>
              <el-col :span="22">
                <div class="block">
                  <el-radio-group
                    v-model="radio2"
                    class="radioTop"
                    @change="difficultyRadio"
                  >
                    <el-radio label="1">简单</el-radio>
                    <el-radio label="2">一般</el-radio>
                    <el-radio label="3">困难</el-radio>
                  </el-radio-group>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="2" class="lef diTop">题干：</el-col>
              <el-col :span="22">
                <div class="edit_container">
                  <quill-editor
                    class="editorhig"
                    v-model="contVal"
                    ref="myQuillEditor"
                    :options="contValOption"
                    @change="onEditorChange($event)"
                  >
                  </quill-editor>
                </div>
              </el-col>
            </el-form-item>
            <!-- 单选-------------------------------- -->
            <!-- 根据选项来判断显示   单选 -->
            <el-form-item v-if="this.questionType === '1'">
              <el-col :span="2" class="lef">选项</el-col>
              <el-col :span="22" class="xuanxiang">
                <el-radio-group v-model="Tworadio" @change="RadioChange">
                  <div>
                    <el-radio label="A"
                      >A:
                      <el-input
                        placeholder="请输入内容"
                        v-model="rainput1"
                        clearable
                      >
                      </el-input>
                    </el-radio>
                  </div>
                  <div>
                    <el-radio label="B"
                      >B:
                      <el-input
                        placeholder="请输入内容"
                        v-model="rainput2"
                        clearable
                      >
                      </el-input>
                    </el-radio>
                  </div>
                  <div>
                    <el-radio label="C"
                      >C:
                      <el-input
                        placeholder="请输入内容"
                        v-model="rainput3"
                        clearable
                      >
                      </el-input
                    ></el-radio>
                  </div>
                  <div>
                    <el-radio label="D"
                      >D:
                      <el-input
                        placeholder="请输入内容"
                        v-model="rainput4"
                        clearable
                      >
                      </el-input>
                    </el-radio>
                  </div>
                </el-radio-group>
              </el-col>
            </el-form-item>
            <!-- /根据选项来判断显示 -->

            <!-- 多选-------------------------------- -->
            <!-- 根据选项来判断显示  多选 -->
            <el-form-item v-else-if="this.questionType === '2'">
              <el-col :span="2" class="lef">选项</el-col>
              <el-col :span="22" class="xuanxiang">
                <el-checkbox-group
                  v-model="checkList"
                  @change="checkboxChange($event)"
                >
                  <div>
                    <el-checkbox label="A"
                      >A:
                      <el-input
                        placeholder="请输入内容"
                        v-model="Chekinput1"
                        clearable
                      >
                      </el-input>
                    </el-checkbox>
                  </div>
                  <div>
                    <el-checkbox label="B"
                      >B:
                      <el-input
                        placeholder="请输入内容"
                        v-model="Chekinput2"
                        clearable
                      >
                      </el-input>
                    </el-checkbox>
                  </div>
                  <div>
                    <el-checkbox label="C"
                      >C:
                      <el-input
                        placeholder="请输入内容"
                        v-model="Chekinput3"
                        clearable
                      >
                      </el-input
                    ></el-checkbox>
                  </div>
                  <div>
                    <el-checkbox label="D"
                      >D:
                      <el-input
                        placeholder="请输入内容"
                        v-model="Chekinput4"
                        clearable
                      >
                      </el-input>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </el-col>
              <el-col><div class="addXuan">+增加选项与答案</div></el-col>
            </el-form-item>
            <!-- /根据选项来判断显示 -->

            <!-- 简答-------------------------------- -->
            <!-- 根据选项来判断显示  简答 -->
            <el-form-item v-else> </el-form-item>
            <!-- /根据选项来判断显示 -->

            <el-form-item>
              <el-col :span="2" class="lef">解析视频:</el-col>
              <el-col :span="5" class="mldevio">
                <el-input placeholder="请输入内容" v-model="inputVio" clearable>
                </el-input>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-col :span="2" class="lef diTop">答案解析</el-col>
              <el-col :span="20" class="mldevio">
                <div class="edit_container">
                  <quill-editor
                    class="editorhig"
                    v-model="content"
                    ref="myQuillEditor"
                    :options="contentOption"
                    @change="answerChange"
                  >
                  </quill-editor>
                </div>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-col :span="2" class="lef diTop">题目备注</el-col>
              <el-col :span="8" class="mldevio">
                <div class="edit_container">
                  <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="请输入内容"
                    v-model="textarea"
                    @input="testChange"
                  >
                  </el-input>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="2" class="lef">试题标签：</el-col>
              <el-col :span="8" class="mldevio">
                <div class="block">
                  <el-cascader
                    v-model="value"
                    :options="pascalOptions"
                    :props="pascalProps"
                    @change="pascalChange"
                  ></el-cascader>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button
                type="success"
                @click="onRecompose"
                class="mldebutton"
                v-if="compile"
                >确定修改</el-button
              >
              <el-button
                type="primary"
                @click="onSubmit"
                class="mldebutton"
                v-else
                >立即创建</el-button
              >
            </el-form-item>
          </el-form>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
// 导入组件
// 导入axios
import { addBasics, modificationBasics } from '@/api/questions/basics'
// 试题录入功能需要调用很多接口
import {
  getSubject,
  getSubdirectory,
  getCompany,
  getTags
} from '@/api/questions/subject/subject'
// 导入城市插件
import { provinces, citys } from '@/utils/citydata.js'
// 导入Vuex
import { mapState } from 'vuex'
export default {
  data() {
    return {
      input: '', // input 框绑定
      value: '', // 试题标签级联绑定
      // 级联配置对象
      // 一级级联学科
      value1: '', // 级联绑定
      subjectOptions: [],
      cateProps: {
        label: 'label',
        value: 'value',

        expandTrigger: 'hover'
      },

      // 二级级联目录
      value2: '', // 级联绑定
      value2Options: [],
      twpcateProps: {
        label: 'label',
        value: 'value',
        expandTrigger: 'hover'
      },
      // ------------------- 企业接口
      // 三级企业
      value3: '', // 级联绑定
      threejectOptions: [],
      threecateProps: {
        label: 'company',
        value: 'id',
        expandTrigger: 'hover'
      },

      // 四级城市-----------------------
      // 省
      value4: '', // 级联绑定
      citeySheng: provinces(),

      citeyKey: '', // 尝试拿城市索引
      // 地区
      value5: '', // 级联绑定
      region: [],
      // 方向级联伪数据
      value6: '', // 级联绑定
      directionList: [
        {
          value: '行星',
          label: '行星'
        },
        {
          value: '月亮',
          label: '月亮'
        },
        {
          value: '白天',
          label: '白天'
        },
        {
          value: '超哥',
          label: '超哥'
        },
        {
          value: 'o2o',
          label: 'o2o'
        }
      ],
      directionOpns: {
        label: 'label',
        value: 'value',
        expandTrigger: 'hover'
      },
      // 试题标签级联绑定
      pascalOptions: [],
      pascalProps: {
        label: 'label',
        value: 'label',
        expandTrigger: 'hover',
        multiple: true
      },

      // 第一个 题干 富文本----------------------
      contVal: '',
      contValOption: {},

      // 第二个 答案解析 富文本 -------------
      content: '',
      contentOption: {},

      radio1: '1', // 控制单选框1 题型
      radio2: '1', // 控制单选框2 难度

      Tworadio: 'A', // 控制第二个单选框
      checkList: ['A'], // 绑定多选
      form: {}, // form表单
      // 单选input ABCD----------------

      rainput1: '',
      rainput2: '',
      rainput3: '',
      rainput4: '',

      // 多选input
      Chekinput1: '',
      Chekinput2: '',
      Chekinput3: '',
      Chekinput4: '',

      inputVio: '', // 解析视频

      // 题目备注----------------
      textarea: '', // 文本域

      // 级联------------------------
      subject: '', // 学科
      catalog: '', // 目录
      enterpriseID: '', // 企业
      province: '和平区', // 城市
      city: '和平区', // 地区
      direction: '企业服务', // 方向
      questionType: '1', // 题型
      difficulty: '1', // 难度
      question: '桑', // 题干
      options: [
        {
          code: 'A',
          img: '',
          isRight: 1,
          title: ''
        }
      ], // 选项
      videoURL: '', // 解析视频
      answer: '312', // 答案解析
      remarks: '145814', // 题目备注
      tags: '语言常识', // 试题标签
      IsId: '' // 存放修改的本行id
    }
  },
  // 计算属性
  computed: {
    ...mapState(['compile'])
  },
  created() {
    this.getSuList()
    this.getCompList()
    // console.log(citey)
    // console.log(this.compile)
    this.setInitial()
  },
  // mounted() {}
  methods: {
    // 给级联绑定赋初始数据
    setInitial() {
      if (this.compile) {
        this.IsId = this.compile.id
        this.value1 = this.compile.subjectID
        this.value2 = this.compile.catalogID
        this.value3 = this.compile.enterpriseID
        this.value4 = this.compile.city
        this.value5 = this.compile.city
        this.value6 = this.compile.direction
        this.radio1 = parseInt(this.compile.questionType)
        this.radio2 = parseInt(this.compile.difficulty)
        this.contVal = this.compile.question
        this.content = this.compile.answer
        this.textarea = this.compile.remarks
        this.value = this.compile.tags
      } else {
        this.value1 = ''
        this.value2 = ''
        this.value3 = ''
        this.value4 = ''
        this.value5 = ''
        this.value6 = ''
        this.value = ''
        this.radio1 = '1'
        this.radio2 = '1'
        this.Tworadio = 'A'
        this.checkList = ['A']
        this.questionType = '1'
        this.difficulty = '1'
      }
    },
    // 获取学科列表数据
    async getSuList() {
      const { data: res } = await getSubject()
      // console.log(res)
      this.subjectOptions = res
      // console.log(this.subjectOptions)
    },

    // 企业管理列表
    async getCompList() {
      const { data: res } = await getCompany()
      this.threejectOptions = res.items
      // console.log(this.threejectOptions)
    },

    // 学科级联改变触发
    async subjectChange(e) {
      // console.log(e)
      const dd = e
      // console.log(dd[0])
      const { data: res } = await getSubdirectory(dd[0])
      this.value2Options = res
      this.subject = dd[0]

      const { data: resqu } = await getTags(dd[0])
      this.pascalOptions = resqu
      // console.log(resqu)
    },

    // 目录级联改变
    catalogue(e) {
      this.catalog = e[0]
      // console.log(this.catalog)
    },
    // 企业级联改变
    enterpriselogue(e) {
      this.enterpriseID = e[0]
    },

    // 检测方向级联变化
    directionChange(e) {
      // console.log(e)
      this.direction = e[0]
    },

    // 城市下拉发送改变------------------------
    citeyChenge(value) {
      // 上传数据赋值
      this.province = value

      this.region = citys(this.value4)
    },
    // 地区
    diquChenge(e) {
      this.city = e
      // console.log(e)
    },

    // 试题标签级联变化
    pascalChange(e) {
      const arr = []
      const de = []
      arr.push(...e)
      for (let i = 0; i < arr.length; i++) {
        de.push(arr[i].join(', '))
      }

      this.tags = de.join(', ')
      // console.log(this.tags)
    },
    // 题干富文本发生改变
    onEditorChange(e) {
      // console.log(e.html)
      this.question = e.html
    },
    // 答案解析富文本发生改变
    answerChange(e) {
      // console.log(e.html)
      this.answer = e.html
    },

    //  两个 单选框 状态改变
    // 题型
    questionRadio(e) {
      this.questionType = e + ''
      // console.log(this.questionType)
    },
    // 难度
    difficultyRadio(e) {
      // console.log(e)
      this.difficulty = e + ''
    },
    // 题目备注监听变化-----------
    testChange(e) {
      // console.log(e)
      this.remarks = e
    },

    // options 对象取值
    // 监听单选变化
    RadioChange(e) {
      console.log(e)
      this.options.code = e
      this.options.isRight = 1
    },

    // 监听多选变化
    checkboxChange(e) {
      console.log(e)
    },

    handleChange() {},
    // 提交form表单
    async onSubmit() {
      // console.log('submit!')
      try {
        await addBasics({
          subjectID: this.subject,
          catalogID: this.catalog,
          enterpriseID: this.enterpriseID,
          province: this.province,
          city: this.city,
          direction: this.direction,
          questionType: this.questionType,
          difficulty: this.difficulty,
          question: this.question,
          options: this.options,
          videoURL: this.videoURL,
          answer: this.answer,
          remarks: this.remarks,
          tags: this.tags
        })
        // 清空级联-----------
        // this.value1 = ''
        // this.value2 = ''
        // this.value3 = ''
        // this.value4 = ''
        // this.value5 = ''
        // this.value6 = ''
        // this.value = ''
        // // this.this.tags = ''
        // // 清空富文本-------------------------
        // this.contVal = '' // 清空第一个富文本
        // this.content = '' // 清空第二个富文本
        // // 题型选项单选框恢复默认-------------
        // this.radio1 = 1
        // this.radio2 = 1
        // // 清空备注
        this.textarea = ''
        this.$message.success('添加成功')
        // 跳转到基础题库
        this.$router.push('/question/basics')
      } catch (e) {
        this.$message.error('添加失败')
        console.log(e)
      }
    },
    // 修改按钮
    async onRecompose() {
      // console.log('修改')
      try {
        await modificationBasics({
          id: this.IsId,
          subjectID: this.subject,
          catalogID: this.catalog,
          enterpriseID: this.enterpriseID,
          province: this.province,
          city: this.city,
          direction: this.direction,
          questionType: this.questionType,
          difficulty: this.difficulty,
          question: this.question,
          options: this.options,
          videoURL: this.videoURL,
          answer: this.answer,
          remarks: this.remarks,
          tags: this.tags
        })
        this.$message.success('修改成功')
        // 跳转到基础题库
        this.$router.push('/question/basics')
      } catch (e) {
        this.$message.error('修改失败')
        console.log(e)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  padding-left: 15px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  margin-top: 25px;
  margin-top: 25px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.lef {
  margin-right: -77px;
  margin-left: 60px;
  margin-top: 25px;
  font-weight: 700;
  color: #60666f;
  font-size: 18px;
}
.fleotright {
  float: right;
}
.mlefsel {
  margin-left: -80px;
}
.buttmain {
  margin-right: 15px;
}
.mtp {
  margin-top: -30px;
}
.mle {
  margin-left: -130px;
}
.leii {
  margin-left: -51px;
}
.radioTop {
  margin-top: -5px;
}
.diTop {
  margin-top: 22px;
}
.editorhig {
  height: 300px;
  width: 1200px;
  margin-bottom: 60px;
}
.box-dewqa {
  // height: 1300px;
}
.xuanxiang {
  margin-top: 50px;
  div {
    margin-bottom: 30px;
  }
  :last-child {
    margin-bottom: 0;
  }
}
.mldevio {
  margin-left: 40px;
}
.mldebutton {
  margin-left: 150px;
}
.addXuan {
  background-color: rgb(190, 29, 29);
  color: #fff;
  width: 140px;
  height: 40px;
  margin-left: 120px;
  border-radius: 15px;
}
</style>
